<script setup>
import { ref,reactive,computed,watch,watchEffect,nextTick,onMounted ,provide} from "vue";
import DirItem from "./dir-item.vue";
import DirGroup from "./dir-group.vue";
import { cloneDeep } from "../../utils";
const props=defineProps({
	defaultActive:"",
	defaultOpeneds:{
		type:Array,
		default:()=>[]
	},
	data:{
		type:Array,
		default:()=>[]
	},
	actionKey:{
		type:String,
		default:"title"
	},
	dirIcon:{
		type:String,
		default:"zj-arrow-down-bold"
	},
	dirIconOpen:{
		type:String,
		default:"zj-arrow-up-bold"
	},
	isZoom:{
		type:Boolean,
		default:false
	},
	width:{
		type:String,
		default:"3em"
	},
})
watchEffect(()=>{
	provide("actionKey",props.actionKey);
})
watchEffect(()=>{
	provide("dirIcon",props.dirIcon);
	provide("dirIconOpen",props.dirIconOpen);
})
const emits=defineEmits(["action"])
const dirData=reactive({
	action:"",
	data:[]
})
const action=ref("")
provide("dirActionStatus",action)
watchEffect(()=>{
	if(props.data){
		dirData.data=cloneDeep(props.data)
		const isActionAll=[]
		if(props.defaultOpeneds&&props.defaultOpeneds.length){
			let defaultOpeneds=props.defaultOpeneds.slice(0)
			if(props.defaultActive){
				defaultOpeneds.push(props.defaultActive)
			}
			function isTitle(arr,parent){
				return arr.forEach(i=>{
					let index=defaultOpeneds.map(i=>i+"").indexOf(i.title)
					if(index>-1){
						isActionAll.push(i)
						if(parent){
							isActionAll.push(...parent)
						}
					}
					if(i.children&&i.children.length){//判断子项
						isTitle(i.children,[...parent||[],i])
					}
				})
			}
			isTitle(dirData.data)
		}else if(props.defaultActive){
			//循环数组判断标题是否和默认选中项相同，
			function isTitle(arr,parent){
				return arr.some(i=>{
					if(i.title===props.defaultActive){
						isActionAll.push(i)
						if(!i?.children||i.children.length===0&&i.title){
							console.log("111:",i.title);
							action.value=i.title
						}
						if(parent){
							isActionAll.push(...parent)
						}
						return true//返回true就结束了
					}
					if(i.children&&i.children.length){//判断子项
						return isTitle(i.children,[...parent||[],i])
					}
				})
			}
			isTitle(dirData.data)
		}
		isActionAll.forEach(i=>i.isOpen=true)
	}
})
function emitAction(e){
	action.value=e
	emits("action",e)
}
const zoomState=ref(window.innerWidth>400?true:false)
provide("zoomState",zoomState)
</script>


<template>
<div class="dir-box" :style="{'--dir-zoom':isZoom?'3em':0,'--dir-width':zoomState?'15em':'3em'}">
	<div class="dir-content">
		<dir-item @dir-action="emitAction"
		:data="item"
		:isOpen="item.isOpen" :title="item.title" :icon="item.icon" :children="item.children" :isGroup="item.isGroup"
		v-for="item in dirData.data" :tabSize="1"></dir-item>
	</div>
	<div class="dir-zoom" v-if="isZoom" @click="zoomState=!zoomState">
		<div class="dir-zoom-button" :style="{float: zoomState?'right':'left'}">
			<div class="zijid-ui" :class="zoomState?'zj-toggle-left':'zj-toggle-right'"></div>
		</div>
	</div>
</div>
</template>


<style scoped>
.dir-box{
	transition: width 0.3s;
	--dir-zoom:4em;
	--dir-width:v-bind(width);
	width:var(--dir-width);
	height: 100%;
	background-color: rgb(48,48,48);
	color: #fff;
	font-size: 14px;
	font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
}

.dir-content{
	height: calc( 100% - var(--dir-zoom));
	overflow-y: auto;
}

.dir-content::-webkit-scrollbar{/*整个滚动条  https://m.php.cn/article/480425.html*/
    width: 5px;
	height: 0;
    background-color: rgb(199, 199, 199);
}
.dir-content::-webkit-scrollbar-thumb{/*滚动条*/
    background-color:rgb(34, 34, 34);
    border-radius: 5px;
}
.dir-content::-webkit-scrollbar-track{/*没有滚动条的轨道部分*/
    width: 20px;
    background-color: rgb(0, 216, 97);
}
.dir-content::-webkit-scrollbar-button{/*上下按钮*/
height:0;

}
.dir-content::-webkit-scrollbar-track-piece{
    width: 20px;
    background-color: rgb(222, 222, 222);
}
.dir-content::-webkit-scrollbar-corner{
}
.dir-content::-webkit-resizer{/*轨道*/
}


.dir-zoom{
	height: var(--dir-zoom);
	outline: 1px solid;
	cursor: pointer;
}
.dir-zoom:active{
	background-color: #003cff7e;
}
.dir-zoom-button{
	width: var(--dir-zoom);
	height: var(--dir-zoom);
	text-align: center;
	line-height: var(--dir-zoom);
	outline: 1px solid;
}
.zijid-ui{
	font-size:calc( var(--dir-zoom) / 2.5) ;
}
</style>